<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/pages/comm/comm.jsp"%>
  <script src="${ctx }/static/js/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="${ctx }/static/js/layer/layer.js"></script>
<link rel="stylesheet" type="text/css" href="${ctx }/static/js/nice-validator/jquery.validator.css">

<div class="row-fluid">
	<div class="span12">
		<!-- BEGIN SAMPLE FORM PORTLET-->
		<div class="portlet box red">
			<div class="portlet-title">
				<div class="caption">
					<i class="icon-reorder"></i>添加用户
				</div>
				<div class="tools">
					<!-- <a href="javascript:;" class="collapse"></a> -->
				</div>
			</div>
			<div class="portlet-body form">

				<!-- BEGIN FORM-->

				<form id="saveUser" class="horizontal-form">
					<div class="row-fluid">
						<!--/span-->
						<div class="span4 ">
							<div class="control-group">
								<label class="control-label" for="">用户名<i style="color: red">*</i></label>
								<div class="controls">
									<input id="accountNo" name="accountNo" class="m-wrap span12" placeholder="请输入手机号/邮箱"
										type="text" data-rule="用户名: required; accountNo">
								</div>
							</div>
						</div>
					</div>
					<div class="row-fluid">
						<div class="span4 ">
							<div class="control-group">
								<label class="control-label" for="">密码（默认密码为123456）</label>
								<div class="controls">
									<input id="password" name="password"  class="m-wrap span12"  value="123456"
										type="password" data-rule="密码: password">
								</div>
							</div>
						</div>
						<div class="span4 ">
							<div class="control-group">
								<label class="control-label" for="">确认密码</label>
								<div class="controls">
									<input id="repassword" name="repassword"  class="m-wrap span12" value="123456" 
										type="password" data-rule="确认密码:match[password]" >
								</div>
							</div>
						</div>
					</div>

					<div class="row-fluid">
						<!--/span-->
						<div class="span4 ">
							<div class="control-group">
								<label class="control-label" for="">姓名</label>
								<div class="controls">
									<input id="userName"  name="userName" class="m-wrap span12" 
										type="text">
								</div>
							</div>
						</div>
						<div class="span4 ">
							<div class="control-group">
								<label class="control-label" for="">性别</label>
								<div class="controls">
								    <input name="sex" value="1" type="radio" checked="checked">
									<label class="radio"> 男 </label>
									<input name="sex" value="0"  type="radio"> 
									<label class="radio"> 女 </label>	 
								</div>
							</div>
						</div>
					</div>

					<div class="row-fluid">
						<!--/span-->
						<div class="span4 ">
							<div class="control-group">
								<label class="control-label" for="">手机<i style="color: red">*</i></label>
								<div class="controls">
									<input id="tel" name="tel" class="m-wrap span12"  type="text" 
									data-rule="手机号: required;digits;mobile">
								</div>
							</div>
						</div>
						<div class="span4 ">
							<div class="control-group">
								<label class="control-label" for="">邮箱</label>
								<div class="controls">
									<input id="email" name="email" class="m-wrap span12" placeholder="邮箱" 
									    type="text"  data-rule="邮箱:email">
								</div>
							</div>
						</div>
					</div>

					<div class="row-fluid">
						<!--/span-->
						<div class="span12 ">
							<div class="control-group">
								<label class="control-label" for="">角色</label>
								<div class="controls">
								    <c:forEach  items="${roles }" var="item">
								      <input name="roleId" value="${item.roleId }" type="radio" <c:if test="${item.roleLevel ==2 }">  checked="checked" </c:if> >
									  <label class="checkbox"> ${item.roleName } </label>
								    </c:forEach>
								</div>
							</div>
						</div>
					</div>

					<div class="row-fluid">
						<div class="span4 ">
							<div class="control-group">
								<label class="control-label" for="">区域</label>
								<div class="controls">
									<select class="m-wrap span4" name="province">
										<option  value="410000000000">河南省</option>
									</select> 
									<select class="m-wrap span4" onchange="openCounty()" id="city" name="city">
										<option value="">全部</option>
										<c:forEach items="${adminAreas }" var="item">
										   <option value="${item.areaNo }">${item.areaName }</option>
										</c:forEach>
									</select>
									<select class="m-wrap span4" name="county" id="county"  >
										<option value="">全部</option>
										<c:forEach items="${countys }" var="item">
										   <option value="${item.areaNo }"  <c:if test="${user.county eq item.areaNo}"> selected="selected" </c:if> >${item.areaName }</option>
										</c:forEach>
									</select>
								</div>
							</div>
						</div>
						<div class="span4 ">
							<div class="control-group">
								<label class="control-label" for="">状态</label>
								<div class="controls">
								    <select class="m-wrap span12" name="stauts">
										<option value="1">启用</option>
										<option value="0">禁用</option>
									</select>
								</div>
							</div>
						</div>
					</div>
					<div class="form-actions">
						<button type="button"  class="btn red" onclick="saveUser()">保存</button>
						<button type="reset" class="btn green">重置</button>
					</div>
				</form>
				<!-- END FORM-->
			</div>
		</div>
		<!-- END SAMPLE FORM PORTLET-->
	</div>
</div>
<script type="text/javascript" src="${ctx }/static/js/nice-validator/jquery.validator.js"></script>
<script type="text/javascript" src="${ctx }/static/js/nice-validator/local/zh_CN.js"></script>


<script type="text/javascript">



function saveUser(){
	//判断市级  如果是市级 则要添加市
	var roleId=$("input[name='roleId']:checked").val();
	var city=$("#city").val();
	//alert(roleId);
	if(roleId=="0056ee85505f40f399186cc724cdc7b5"||roleId=="0056ee85505f40f399186cc724cdc7b6"){
	if(city==null||city==undefined||city==""){
	layer.msg("请为市级用户选择归属市");
		return false;
	}
	}
     $('#saveUser').trigger("validate");
}

var checkSubmitFlag = false;  // 判断是否重复提交  默认不是重复的
//保存后台用户
$('#saveUser').validator({
	rules: {
        // 自定义规则：符合用户名、手机号或者邮箱规则都算通过
        // 注意：第一个test是正则的方法，后面两个是this.test()是当前实例的方法
        accountNo: function(element) {
            return  this.test(element, "mobile")
                   ||this.test(element, "email")
                   ||'用户名请填写手机号或者邮箱';
        }
    },
	stopOnError: false, //关闭此开关，以便一次性显示所有消息
    msgMaker: false,
    valid: function(form) {
        if (checkSubmitFlag == true) { 
	         return false; 
	      } 
		checkSubmitFlag=true;
    	$.ajax({
    		url: '${ctx}'+'/user/add',
    		type: 'post',
    		dataType: 'json',
    		data: $(form).serialize(),
    		success: function (data) {
    			if(data.code==200){
    			  layer.msg("保存成功");
    			  document.getElementById("saveUser").reset();
    			}else{
    			  layer.msg(data.msg);
    			}
    			checkSubmitFlag=false; 
    		}
    	});
    },
    invalid: function(form, errors) {
    	var validMsg = '';
    	$(errors).each(function() {
    		validMsg += this + '<br>';
    	});
    	
    	layer.msg(validMsg);
    }
});	// 表单验证初始化

//查询县级列表
function openCounty(){
  var areaNo =$("#city").val();
  if(areaNo  !=""){
    $.ajax({
		url: '${ctx}' +'/area/getCounty',
      type: 'post',
      dataType: 'json',
      data: {
        "cityId":areaNo
  	},
      success: function (data) {
      	$("#county").empty();
      	var optml=optionHtml(data.data);
      	$("#county").append(optml);
      }
	});
  }else{
     $("#county").empty();
     var ophtm="<option value='' >全部</option>";
     $("#county").append(ophtm);
  }
	
}
//组装html
function  optionHtml(data){
	var ophtm="<option value='' >全部</option>";
	for(var i=0;i<data.length;i++){
        ophtm+="<option value="+data[i].areaNo+">"+data[i].areaName+"</option>";
    }
	return ophtm;
}
</script>
